<template>
    <view :style="{ '--color': color }" class="Moneyall">
        <navBar :title="title" :bgColor="bgColor" :transparent="false" color="#fff"></navBar>

        <view class="MoneyBox">
            <view class="Money" :style="{ backgroundImage: 'url(' + purse.balance_index_bj + ')' }">
                <view class="Money_account">
                    <view class="d-flex f-column white" @click="toUrl(`/moneyPage/capital/recharge_Info`)">
                        <text class="size32">账户{{ nameDefinition.t_walletTitle }}（{{ nameDefinition.t_walletUnit }}）</text>
                        <view class="d-flex a-center m-top10">
                            <text class="size54 bold">{{ purse.v_money }}</text>
                            <view class="iconfont icon-a-zujian32 h6 m-left20"></view>
                        </view>
                    </view>
                    <view class="d-flex f-column a-center white" @click="toUrl(`payment`)">
                        <view class="iconfont icon-fukuanma white size60"></view>
                        <text class="h6 m-top8">付款码</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="content">
            <view class="Topup_activity" v-if="activitys.length">
                <text class="black size32">选择充值{{ nameDefinition.t_walletTitle }}</text>
                <view class="Topup_activity_box">
                    <view class="activity_list" @click="activitysId = item.id" :class="{ Active: activitysId == item.id }" v-for="item in activitys" :key="item.id">
                        <text class="money_val">￥{{ item.limit }}</text>
                        <text class="explain ellipsis_3" v-if="item.desc">{{ item.desc }}</text>
                    </view>
                </view>
            </view>

            <view class="row j-centert a-center" @click="recharge">
                <text class="Custom_title">{{ SumTitle }}</text>
                <view class="iconfont icon-a-zujian32 color size22 m-left10"></view>
            </view>

            <view class="Instructions" v-if="purse.recharge_rule">
                <text class="black size32">余额说明</text>
                <view class="rows m-top30">
                    <u-parse :content="purse.recharge_rule" :domain="imgUrl"></u-parse>
                </view>
            </view>
        </view>

        <view class="topUp" v-if="activitys.length">
            <view class="topUp_btn" @click="handleRecharge">
                <text class="size32">立即充值</text>
                <text class="size32" v-if="Sum">￥{{ Sum }}</text>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                imgUrl: this.imgUrl,
                purse: '',
                activitys: [],
                activitysId: '',
                Shut: 0, // 闭合
                bgColor: ''
            };
        },

        onShow() {
            this.myMoney();
            let options = wx.getEnterOptionsSync();
            if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.Shut == 1) {
                let extraData = options.referrerInfo.extraData;
                if (!extraData) return;
                if (extraData.code == 'success') {
                    this.$Toast('充值成功');
                    this.myMoney();
                }
            }
        },
        methods: {
            async myMoney() {
                const result = await Api.myMoney();
                this.purse = result;
                this.activitys = result.activitys || [];
                if (this.activitys.length) this.activitysId = this.activitys[0].id;
            },

            async handleRecharge() {
                if (!this.activitysId) return;
                this.$showLoading('');
                const reponse = this.activitys.find((item) => item.id == this.activitysId);
                const result = await Api.recharge(reponse.limit, reponse.aesId, reponse.aesVerifyCode);
                this.$hideLoading();
                if (result.extraData) {
                    this.Shut = 1;
                    wx.openEmbeddedMiniProgram({
                        appId: result.appId,
                        extraData: result.extraData
                    });
                    return;
                }
                const Payment = await this.$pop.getPayment(result);
                if (Payment) this.myMoney();
            },

            recharge() {
                this.$http
                    .get({
                        url: '/SRA_memberRecharge/config',
                        data: {
                            vId: this.vid,
                            VeriCode: this.bid
                        }
                    })
                    .then((res) => {
                        if (res.code != '100') return this.$Toast(res.notice);
                        const result = res.data;
                        if (!result || (result.myJson && result.myJson.rechargeState == 0)) return this.$Toast(`抱歉！您不能充值~~`);
                        this.toUrl(`/moneyPage/capital/recharge`);
                    });
            }
        },
        computed: {
            ...mapState(['color', 'nameDefinition', 'vid', 'bid', 'share']),
            title() {
                return `我的${this.nameDefinition.t_walletTitle}`;
            },
            Sum() {
                if (!this.activitysId) return;
                const result = this.activitys.find((item) => item.id == this.activitysId);
                return result.limit;
            },
            SumTitle() {
                return this.activitys.length ? '自定义金额' : '去充值';
            }
        },
        onShareAppMessage(option) {
            return {
                title: this.share.title,
                desc: this.share.desc,
                path: '/pages/index/index?share_v_id=' + this.vid,
                imageUrl: this.share.imageUrl
            };
        },
        onPageScroll(e) {
            if (e.scrollTop > 200) {
                this.bgColor = this.color;
            } else {
                this.bgColor = '';
            }
        },
        onUnload() {
            this.Shut = 0;
        }
    };
</script>
<style scoped lang="scss">
    .Moneyall {
        width: 100%;
        padding-bottom: 160rpx;
    }

    .MoneyBox {
        width: 100%;
        background-color: var(--color);
    }

    .Money {
        width: 100%;
        // #ifdef MP-WEIXIN
        padding: 230rpx 50rpx 50rpx 50rpx;
        // #endif
        // #ifdef H5
        padding: 160rpx 50rpx 50rpx 50rpx;
        // #endif
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .Money_account {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: center;
    }

    .content {
        width: 100%;
        background-color: #ffffff;
        padding: 50rpx;
        margin-top: -20rpx;
        border-radius: 20rpx 20rpx 0 0;
    }

    .Topup_activity {
        width: 100%;
    }

    .Topup_activity_box {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 40rpx;
        margin-top: 30rpx;
        margin-bottom: 40rpx;
    }

    .activity_list {
        width: 100%;
        height: 220rpx;
        padding: 10rpx;
        border: 1px solid #cccccc;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .money_val {
        color: #000;
        font-size: 52rpx;
    }

    .explain {
        color: var(--color);
        font-size: 26rpx;
        margin-top: 10rpx;
        text-align: center;
    }

    .Active {
        border: 1px solid var(--color) !important;
    }

    .Custom_title {
        color: var(--color);
        font-size: 26rpx;
    }

    .Instructions {
        width: 100%;
        margin-top: 30rpx;
    }

    .topUp {
        width: 100%;
        background-color: #ffffff;
        padding: 20rpx 40rpx 60rpx 40rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 666;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7rpx 29rpx 0px;
    }

    .topUp_btn {
        width: 100%;
        height: 80rpx;
        background-color: var(--color);
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 30rpx;
    }
</style>
